<template>
  <div class="enterprise-auth">
    <div class="page-header">
      <h2 class="page-title">企业认证</h2>
    </div>

    <!-- 企业信息 -->
    <h3 class="section-title">企业信息</h3>
    <div class="section">
      <div class="info-row">
        <span class="label">公司名称：</span>
        <span class="value">{{ record?.companyName }}</span>
        <div class="icon-wrapper approved" v-if="record?.certRecord?.auditStatus === REVIEW_STATUS.REVIEW_APPROVED.value">
          <check-circle-filled />
          <!-- 已认证图标 -->
          <span class="status-tag approved">{{ authStatus.certRecordStatus.desc }}</span>
        </div>
        <div class="icon-wrapper rejected" v-if="record?.certRecord?.auditStatus !== REVIEW_STATUS.REVIEW_APPROVED.value">
          <close-circle-filled />
          <!-- 未认证图标 -->
          <span class="status-tag rejected">{{ authStatus.certRecordStatus.desc }}</span>
        </div>
      </div>
      <div class="info-row">
        <div class="auth-status">
          <span class="label">法人代表人（负责人）：</span>
          <span class="value">{{ record?.certRecord?.legalPersonIdentityCardInfo?.name }}</span>
        </div>
      </div>
      <div class="info-row">
        <div class="auth-status" style="max-width: 300px">
          <span class="label">注册地省：</span>
          <span class="value">{{ record?.certRecord?.companyLicenseInfo?.regProvincial }}</span>
        </div>
        <div class="auth-status">
          <span class="label">注册地城市：</span>
          <span class="value">{{ record?.certRecord?.companyLicenseInfo?.regCity }}</span>
        </div>
      </div>
      <div class="info-row">
        <div class="auth-status">
          <span class="label">注册地址：</span>
          <span class="value">{{ record?.certRecord?.companyLicenseInfo?.regAddress }}</span>
        </div>
      </div>
      <div class="info-row">
        <div class="auth-status">
          <span class="label">经营范围：</span>
          <span class="value">{{ record?.certRecord?.companyLicenseInfo?.businessScope }}</span>
        </div>
      </div>
    </div>

    <!-- 管理员授权书信息 -->
    <h3 class="section-title">管理员授权书信息</h3>
    <div class="section">
      <div class="info-row">
        <div class="auth-status" style="max-width: 300px">
          <span class="label">管理员授权书确认状态：</span>
          <span class="value">{{ authStatus.authRecordStatus.desc }}</span>
        </div>
        <a-button
          type="primary"
          class="auth-button record"
          @click="handleAuth"
          v-if="authStatus.authRecordStatus.value === AUTH_STATUS.EMPOWER_NOT_APPROVED.value"
          >授权认证</a-button
        >
        <a-button type="primary" class="auth-button info" @click="handleAuthInfo">确认明细</a-button>
      </div>
    </div>

    <!-- 认证信息 -->
    <h3 class="section-title">认证信息</h3>
    <div class="section">
      <div class="info-row">
        <div class="auth-status" style="max-width: 300px">
          <span class="label">实名认证状态：</span>
          <span class="value">{{ authStatus.certRecordStatus.desc }}</span>
        </div>
        <a-button type="primary" class="auth-button" @click="handleRealNameAuth">{{ text }}</a-button>
        <a-button type="primary" class="auth-button info" @click="handleRealNameAuthInfo">确认明细</a-button>
      </div>
    </div>

    <!--    &lt;!&ndash; 企业信息 &ndash;&gt;-->
    <!--    <h3 class="section-title">企业信息</h3>-->
    <!--    <div class="section">-->
    <!--      <div class="info-row">-->
    <!--        <span class="label">核心业务</span>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script setup>
  import { ref, onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { enterpriseApi } from '/@/api/business/b-agent/enterprise/enterprise-api.js'
  import { AUTH_STATUS, REVIEW_STATUS } from '/@/constants/business/b-agent/enterprise/enterprise-const.js'
  import { smartSentry } from '/@/lib/smart-sentry.js'
  import { CheckCircleFilled } from '@ant-design/icons-vue'

  const router = useRouter()

  const record = ref({})
  const loading = ref(true)

  const authStatus = reactive({
    authRecordStatus: AUTH_STATUS.EMPOWER_NOT_APPROVED,
    certRecordStatus: AUTH_STATUS.AUTH_NOT_APPROVED,
  })

  const text = ref('实名认证')

  const fetchRecord = async () => {
    try {
      const queryRuselt = await enterpriseApi.findById()
      record.value = queryRuselt.data // 假设返回的数据在 data 字段中
      authStatus.authRecordStatus =
        record.value.authRecord.auditStatus === REVIEW_STATUS.REVIEW_APPROVED.value ? AUTH_STATUS.EMPOWER_APPROVED : AUTH_STATUS.EMPOWER_NOT_APPROVED
      authStatus.certRecordStatus =
        record.value.certRecord.auditStatus === REVIEW_STATUS.REVIEW_APPROVED.value ? AUTH_STATUS.AUTH_APPROVED : AUTH_STATUS.AUTH_NOT_APPROVED
      text.value = record.value.certRecord.auditStatus === REVIEW_STATUS.REVIEW_APPROVED.value ? '认证变更' : '实名认证'
    } catch (e) {
      smartSentry.captureError(e)
    } finally {
      loading.value = false
    }
  }

  onMounted(() => {
    fetchRecord()
  })

  // 处理授权认证
  const handleAuth = () => {
    router.push({
      path: '/auth_record/insert',
      query: {
        companyName: record.value.companyName,
      },
    })
  }

  const handleAuthInfo = () => {
    router.push('/auth_record/page')
  }

  // 处理实名认证
  const handleRealNameAuth = () => {
    router.push({
      path: '/cert_record/insert',
      query: {
        companyName: record.value.companyName,
      },
    })
  }
  const handleRealNameAuthInfo = () => {
    router.push('/cert_record/page')
  }
</script>

<style lang="less" scoped>
  .enterprise-auth {
    padding: 24px;

    .page-header {
      display: flex;
      height: 60px;
      margin-bottom: 24px;
      align-items: center;
      background-color: #fff;

      .back-button {
        margin-right: 16px;
      }

      .page-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 0 20px;
      }
    }

    .section {
      margin-bottom: 32px;
      width: 100%;
      padding: 10px 20px;
      background-color: #fff;

      .section-title {
        font-size: 14px;
        color: #1890ff;
        margin-bottom: 20px;
        font-weight: normal;
      }
    }

    .info-row {
      min-width: 600px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      min-height: 32px;
      position: relative;

      .icon-wrapper {
        font-size: 16px;
        &.approved {
          color: #52c41a;
        }

        &.rejected {
          color: #f62e3f;
        }
      }

      .label {
        color: #666;
        min-width: 100px;
        margin-right: 8px;
        padding-left: 40px;
      }

      .value {
        color: #333;
        margin-right: 12px;
      }

      .auth-status {
        display: flex;
        align-items: center;
        flex: 1;

        .label {
          padding-left: 40px;
        }
      }

      .status-tag {
        font-size: 12px;
        margin-left: 8px;

        &.approved {
          color: #52c41a;
        }

        &.rejected {
          color: #ff4d4f;
        }
      }

      .auth-button {
        background: #1890ff;
        border-color: #1890ff;
        margin-left: 50px;

        &:hover {
          background: #40a9ff;
          border-color: #40a9ff;
        }
      }
    }

    .status-tag {
      font-size: 12px;
      color: #ff4d4f;
      margin-left: 16px;
    }

    :deep(.ant-btn) {
      height: 32px;
      padding: 0 16px;
      font-size: 14px;
      border-radius: 2px;
    }

    :deep(.ant-btn-primary) {
      background: #1890ff;
      border-color: #1890ff;
      color: #fff;

      &:hover {
        background: #40a9ff;
        border-color: #40a9ff;
      }

      &:active {
        background: #096dd9;
        border-color: #096dd9;
      }
    }
  }
</style>
